<template>
    <div class="warp">
        <div class="title">肉厚仕様ラベル(法規毎）</div>

        <div class="scrollView">
            <div class="row">
                <div class="label">適用法規</div>
                <el-select class="long-ipt" placeholder="  " v-model="tempLawCode" @change="changeFn">
                    <el-option v-for="item in LawCodeList" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>
            </div>
            <div class="row" v-for="(item, index) in thickStyleList" :key="index">
                <div class="label">{{ item.label }}</div>
                <el-input v-model="item.dataVal"
                    @input="item.dataVal = $setMaxLength(item.dataVal, 20), changeIptFn()"></el-input>
            </div>
        </div>
    </div>
</template>

<script>
import _ from 'lodash-es';
export default {
    name: "Unit",
    props: ['thickStyleList', 'LawCode', 'LawCodeList'],
    data() {
        return {
            tempLawCode: 0,

            thickStyleListTemp: null
        };
    },
    components: {},
    watch: {},
    methods: {
        changeFn(e) {
            this.$emit('changeLawCode', this.tempLawCode)
        },

        changeIptFn() {
            this.$emit('isChangeFlgFn', !_.isEqual(this.thickStyleListTemp, this.thickStyleList))
        }
    },
    created() { },
    mounted() {
        this.tempLawCode = this.LawCode;
        this.$emit('changeLawCode', this.tempLawCode);

        this.thickStyleListTemp = _.cloneDeep(this.thickStyleList);
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.warp {
    margin-top: 30px;
    // background-color: red;
    height: 77%;
    width: 50%;
    overflow: hidden;

    .title {
        color: #106EBEFF;
        display: flex;
        align-items: center;
        font-weight: 700;
        padding: 0 0 12px 0;

        &::before {
            content: '';
            display: block;
            width: 3px;
            height: 14px;
            background-color: #106EBEFF;
            margin-right: 10px;
            border-radius: 5px;
        }
    }

    .scrollView {
        height: 100%;
        overflow: scroll;
        padding-bottom: 50px;
        width: 100%;
        min-width: 100%;

        .long-ipt {
            width: 500px;
            height: 32px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
                background-color: #FFF !important;

            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }
    }

    .row {
        display: flex;
        align-items: center;
        margin-top: 12px;

        .label {
            width: 100px;
            min-width: 100px;
        }

        ::v-deep .el-input__inner {
            width: 500px;
            height: 32px;
            background-color: #FFDEACFF;
        }
    }
}
</style>
